<template>
  <div class="box1">
    <p class="title">
      {{detail.productName}}
    </p>
    <p v-html="detail.productImg"></p>
    <div v-html="detail.bjShop"></div>
    <button @click="back">返回</button>
  </div>
</template>
<script>
  import { getDetail } from "@/api"
  export default {
    data() {
      return {
        detail: {}
      }
    },
    created() {
      const id = this.$route.query.id;
      //发送请求获取详情
      getDetail(id)
        .then(res => {
          this.detail = res.data.result[0]
        }).catch(err => {
          console.log("出错啦")
        })
    },
    methods: {
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style>
    .box1{
        width:400px;
        margin: 20px auto;
    }
    button{
        width: 80px;
        height: 40px;
        border-radius:10px;
    }
    button:hover{
        color: azure;
        background:#333;
    }
</style>